<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备一个容器 -->
    <div id="root">
        <h2>当前的值是：<span v-text="num"></span></h2><br>
        <h2>当前的值是：<span v-big="num"></span></h2><br>
        <button @click="num++">点击n+1</button>
        <hr>
        <input type="text" :value="num" placeholder="v-bind效果">
        <input type="text" v-fbind:value="num" placeholder="v-fbind效果">
    </div>

    <script type="text/javascript">
        // 全局自定义指令
        Vue.directive('fbind',{
            //指令与元素成功绑定时（一上来）
            bind(element,binding){
                console.log('bind...',element,binding);
                element.value = binding.value
            },
            //指令所在元素被插入页面时（通常是一些特殊操作：比如获取焦点focus、获取父元素parentElement等）
            inserted(element,binding){
                // console.log('inserted...');
                element.focus()
            },
            //指令所在模板被重新解析时
            update(element,binding){
                // console.log('update...');
                element.value = binding.value
            }
        })

        new Vue({
            el:'#root',
            data(){
                return{
                    num:1
                }
            },
            directives:{    
                // big函数什么时候被调用？1.指令与元素成功绑定时 2.指令所在的模板被重新解析时

                // 函数式声明指令
                big(element,binding){
                    // console.log('@',element,binding);
                    element.innerText = binding.value*10
                    // console.log('@big',this); //注意：所有声明在配置项directives里的this都是window实例
                },
                // 对象式声明指令
                // fbind:{
                //     //指令与元素成功绑定时（一上来）
                //     bind(element,binding){
                //         // console.log('bind...');
                //         element.value = binding.value
                //     },
                //     //指令所在元素被插入页面时（通常是一些特殊操作：比如获取焦点focus、获取父元素parentElement等）
                //     inserted(element,binding){
                //         // console.log('inserted...');
                //         element.focus()
                //     },
                //     //指令所在模板被重新解析时
                //     update(element,binding){
                //         // console.log('update...');
                //         element.value = binding.value
                //     }
                // }
            }
        })
    </script>
</body>

</html>